<template>
  <div>
    <BasePage>
      <el-card>
        <el-row class="diy-row" :gutter="12">
          <el-col :span="2">
            <el-button type="primary" @click="showCreateProjectDialog"
              >添加项目</el-button
            >
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="query"
              clearable
              @clear="removeSearch"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchProject"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="projectList" border stripe>
          <el-table-column
            prop="name"
            label="项目名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="mark"
            label="项目代号"
            width="90"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="protocol"
            label="协议"
            width="60"
          >
          </el-table-column>
          <el-table-column
            prop="host"
            label="域名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="描述"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="status" label="状态" width="78px">
            <template scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="changeStatus(scope.row)"
                active-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showEditProjectDialog(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeProject(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 添加项目dialog -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="projectDialogVisible"
        width="30%"
        @close="closeDialog"
      >
        <el-form
          :model="proInfo"
          :rules="proInfoRules"
          ref="proInfoRef"
          label-width="100px"
        >
          <el-form-item label="项目" prop="name">
            <el-input
              v-model="proInfo.name"
              placeholder="请输入项目名"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目代号" prop="mark">
            <el-input
              v-model="proInfo.mark"
              placeholder="请输入项目代号"
            ></el-input>
          </el-form-item>
          <el-form-item label="协议" prop="protocol">
            <el-select
              v-model="proInfo.protocol"
              placeholder="请选择协议"
              clearable
            >
              <el-option
                v-for="proto in proto_list"
                :key="proto.id"
                :label="proto.dict_value"
                :value="proto.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="域名" prop="host">
            <el-input
              v-model="proInfo.host"
              placeholder="请输入域名"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input
              v-model="proInfo.desc"
              placeholder="请输入描述信息"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="projectDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createOrEditProject"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </BasePage>
  </div>
</template>
<script>
export default {
  data() {
    return {
      projectList: [],
      projectDialogVisible: false,
      query: '',
      proInfo: {
        name: '',
        host: '',
        protocol: null,
        mark: '',
        desc: '',
      },
      proInfoRules: {
        name: [{ required: true, message: '请输入项目名', trigger: 'blur' }],
        protocol: [
          {
            required: true,
            message: '请选择协议',
            trigger: 'change',
            type: 'number',
          },
        ],
        mark: [{ required: true, message: '请输入项目代号', trigger: 'blur' }],
        host: [{ required: true, message: '请输入域名', trigger: 'blur' }],
      },
      proto_list: [],
      dialogTitle: '',
      createProject: null,
    }
  },
  created() {
    this.getProjectList()
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      this.getProtocol()
      this.$http
        .get('/core/project/list')
        .then((res) => {
          const resData = res.data
          if (resData.code === 200) {
            this.projectList = resData.data.list
            this.projectList.forEach((project) => {
              this.proto_list.forEach((proto) => {
                if (project.protocol === proto.id) {
                  project.protocol = proto.dict_value
                }
              })
            })
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch((err) => {
          return this.$message.error(err)
        })
    },
    // 显示新建项目弹窗
    showCreateProjectDialog() {
      this.dialogTitle = '添加项目'
      this.createProject = true
      this.projectDialogVisible = true
      // 获取协议列表
      this.getProtocol()
    },
    // 创建或修改项目
    createOrEditProject() {
      // 新建项目
      if (this.createProject) {
        this.$refs.proInfoRef.validate((valid) => {
          if (valid) {
            this.$http
              .post('/core/project/create', this.proInfo)
              .then((res) => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getProjectList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
                this.projectDialogVisible = false
              })
              .catch((err) => {
                return this.$message.error(err)
              })
          }
        })
      } else {
        // 编辑项目
        this.$refs.proInfoRef.validate((valid) => {
          if (valid) {
            this.$http
              .post('/core/project/update', this.proInfo)
              .then((res) => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getProjectList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
                this.projectDialogVisible = false
              })
              .catch((err) => {
                return this.$message.error(err)
              })
          }
        })
      }
    },
    // 删除项目
    removeProject(id) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http
            .post('/core/project/delete', { id: id })
            .then((res) => {
              const resData = res.data
              if (resData.code === 200) {
                this.getProjectList()
                this.$message.success(resData.msg)
              } else {
                return this.$message.error(resData.msg)
              }
            })
            .catch((err) => {
              return this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 显示编辑项目弹窗
    showEditProjectDialog(id) {
      this.dialogTitle = '编辑项目'
      this.createProject = false
      this.projectDialogVisible = true
      this.$http
        .get(`/core/project/getById?id=${id}`)
        .then((res) => {
          const resData = res.data
          if (resData.code === 200) {
            this.proInfo = resData.data[0]
            // 给协议下拉框赋值
            this.getProtocol()
            // this.$message.success(resData.msg)
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch((err) => {
          return this.$message.error(err)
        })
    },
    // 获取协议
    getProtocol() {
      this.$http
        .get('/core/dict/queryTypeList?dictType=protocol')
        .then((res) => {
          console.log(res.data)
          const resData = res.data
          if (resData.code === 200) {
            this.proto_list = resData.data.list
          } else {
            return this.$message.error('获取数据失败')
          }
        })
        .catch((err) => {
          return this.$message.error(err)
        })
    },
    // 搜索项目
    searchProject() {
      this.$http
        .get(`/core/project/search?query=${this.query}`)
        .then((res) => {
          const resData = res.data
          if (resData.code === 200) {
            this.projectList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch((err) => {
          return this.$message.error(err)
        })
    },
    // 重置搜索
    removeSearch() {
      this.getProjectList()
    },
    // 关闭dialog 操作
    closeDialog() {
      this.$refs.proInfoRef.resetFields()
    },
    // 修改项目状态
    changeStatus(info) {
      this.$http
        .post('/core/project/changeStatus', { id: info.id })
        .then((res) => {
          const resData = res.data
          if (resData.code !== 200) {
            info.status = !info.status
            return this.$message.error(resData.msg)
          }
        })
        .catch((err) => {
          info.status = !info.status
          return this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
@import './Project.less';
</style>
